<template>
  <view>
    <u-navbar :is-back="true" title="申论套卷练习"></u-navbar>
    <view class="container">
      <scroll-view scroll-y class="menu">
        <view class="menu-list">
          <view v-for="(dictValue, name) in menuItems" :key="name" @click="handleQuery(dictValue[1])"
                class="menu-item" :class="{ active: selectedType === dictValue[1] }">
            {{ name }}
          </view>
        </view>
      </scroll-view>
      <view class="content">
        <view class="paper-count-container">
          <view class="paper-count">共有{{ sortedPapers.length }}套</view>
        </view>
        <view v-if="sortedPapers.length === 0" class="no-papers">
          暂时还没有试卷哦
        </view>
        <view v-for="paper in sortedPapers" :key="paper.id" class="paper-card" @click="gotoPaper(paper.id)">
          <view>{{ paper.name }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue";
import { allSlpapers } from "@/api/business/slpaper"; // 假设有一个 API 方法来获取申论试卷列表

export default {
  components: {
    UNavbar,
  },
  data() {
    return {
      menuItems: {
          '小模考': ['小模考', '1'],
          '国考': ['国考', '2'],
          '安徽': ['安徽', '3'],
          '北京': ['北京', '4'],
          '福建': ['福建', '5'],
          '甘肃': ['甘肃', '6'],
          '广东': ['广东', '7'],
          '广西': ['广西', '8'],
          '贵州': ['贵州', '9'],
          '海南': ['海南', '10'],
          '河北': ['河北', '11'],
          '河南': ['河南', '12'],
          '黑龙江': ['黑龙江', '13'],
          '湖北': ['湖北', '14'],
          '湖南': ['湖南', '15'],
          '吉林': ['吉林', '16'],
          '江苏': ['江苏', '17'],
          '江西': ['江西', '18'],
          '辽宁': ['辽宁', '19'],
          '内蒙古': ['内蒙古', '20'],
          '宁夏': ['宁夏', '21'],
          '青海': ['青海', '22'],
          '山东': ['山东', '23'],
          '山西': ['山西', '24'],
		  '陕西': ['陕西', '25'],
          '上海': ['上海', '26'],
          '四川': ['四川', '27'],
          '天津': ['天津', '28'],
          '西藏': ['西藏', '29'],
          '新疆': ['新疆', '30'],
          '新疆兵团': ['新疆兵团', '31'],
          '云南': ['云南', '32'],
          '浙江': ['浙江', '33'],
          '重庆': ['重庆', '34'],
          '广州': ['广州', '35'],
          '深圳': ['深圳', '36'],
          '选调生': ['选调生', '37'],
          '公安招警和公检法': ['公安招警和公检法', '38']
      },
      papers: [],
      selectedType: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        paperType: null,
      },
    };
  },
  created() {
    const firstKey = Object.keys(this.menuItems)[0];
    this.selectedType = this.menuItems[firstKey][1];
    this.fetchPaperList();
  },
  computed: {
    sortedPapers() {
      return (this.papers || []).filter(paper => paper.paperType == this.selectedType).sort((a, b) => b.paperYear - a.paperYear);
    },
  },
  methods: {
    fetchPaperList() {
      allSlpapers(this.queryParams).then(response => {
        this.papers = response.data || [];
      }).catch(error => {
        console.error("获取试卷数据失败", error);
      });
    },
    handleQuery(type) {
      this.selectedType = type;
      this.queryParams.paperType = type;
      this.fetchPaperList();
    },
    gotoPaper(paperId) {
        const paper = this.papers.find(p => p.id === paperId);
        if (paper) {
          this.navigateTo(`/subPackageB/slpaper?id=${paper.id}&paper_type=${paper.paperType}`);
        }
      }
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100vh;
}
.menu {
  width: 18%;
  border-right: 1px solid #e0e0e0;
}
.menu-list {
  padding: 0px;
}
.menu-item {
  padding: 10px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.3s;
}
.menu-item:hover {
  background-color: #f5f5f5;
}
.menu-item.active {
  background-color: #e0e0e0;
  font-weight: bold;
}
.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.paper-card {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.paper-count-container {
  position: sticky;
  top: 0;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: bold;
}
</style>